<template>
  <div class="admin-container">
    <!-- 侧边栏导航 -->
    <el-aside width="220px" class="admin-sidebar">
      <div class="sidebar-header">
        <img src="/logo.png" style="height: 60px; margin-left: -20px;" alt=""></img>
      </div>
      
      <el-menu
        class="el-menu-vertical-demo admin-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#ffd04b"
        :default-active="route.path"
        router
      >
        <el-menu-item index="/admin/index"><el-icon><message /></el-icon>首页</el-menu-item>
        <el-menu-item index="/admin/user1"><el-icon><message /></el-icon>用户列表</el-menu-item>
        <el-menu-item index="/admin/company1"><el-icon><message /></el-icon>企业列表</el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon><message /></el-icon>职位管理
          </template>
          <el-menu-item index="/admin/posList">职位列表</el-menu-item>
          <el-menu-item index="/admin/posReview">职位审核</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/admin/report"><el-icon><message /></el-icon>数据统计</el-menu-item>
      </el-menu>
    </el-aside>
    
    <!-- 主内容区 -->
    <div class="admin-main">
      <!-- 顶部导航栏 -->
      <el-header class="admin-header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumb" :key="item.path">
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :size="36" :src="user.avatar" />
              <span class="username">{{ user.name }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- 内容区 -->
      <div class="admin-content">        
        <!-- 主内容 -->
        <div class="content-wrapper">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()

onMounted(() => {
  getInfo()
})
// 从本地获取用户信息
const getInfo = () => {
  const userInfo = JSON.parse(localStorage.getItem('adminInfo'))
  if (userInfo && userInfo.username) {
    user.value.name = userInfo.username
  }
}
// 用户信息
const user = ref({
  name: '管理员',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  role: '超级管理员'
})

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?','提示',{
      confirmButtonText: '确定', 
      cancelButtonText: '取消', 
      type: 'warning',
  }).then(() => {
      // 1.删除登录信息
      console.log('退出登录')
      localStorage.removeItem('adminInfo')
      ElMessage.success('退出成功')
      router.push('/')
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消退出登录',
    })
  })
}
</script>

<style scoped>
.admin-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  
  .admin-sidebar {
    background-color: #304156;
    color: #bfcbd9;
    transition: width 0.3s;
    
    .sidebar-header {
      padding: 5px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .admin-menu {
      border-right: none;
      height: calc(100vh - 60px);
    }
  }
  
  .admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .admin-header {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background-color: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      
      .header-left {
        .el-breadcrumb {
          line-height: 60px;
        }
      }
      
      .header-right {
        display: flex;
        align-items: center;
        
        .el-dropdown-link {
          display: flex;
          align-items: center;
          cursor: pointer;
          
          .username {
            margin: 0 5px 0 10px;
            font-size: 14px;
          }
        }
        
        .header-icon {
          margin-left: 20px;
          font-size: 18px;
          cursor: pointer;
          color: #5a5e66;
          
          &:hover {
            color: #409EFF;
          }
        }
      }
    }
    
    .admin-content {
      flex: 1;
      padding: 15px;
      background-color: #f0f2f5;
      overflow: auto;
    }
  }
}


@media screen and (max-width: 992px) {
  .admin-sidebar {
    width: 64px !important;
    
    .sidebar-header {
      h2, p {
        display: none;
      }
    }
    
    :deep(.el-submenu__title span),
    :deep(.el-menu-item span) {
      display: none;
    }
  }
}
</style>